<template>
	<view class="header">
		<view class="bar">
			<image src="../../static/right-wite.png" @click="back" mode=""></image>
			<text>提现</text>
		</view>
	</view>
	<view class="box" v-if="userData">

		<view class="box-center">
			<image src="../../static/r-tab-2.png" v-if="tabIndex==0" class="bg" mode=""></image>
			<!-- <image src="../../static/r-tab-4.png" v-if="tabIndex==1" class="bg" mode=""></image> -->
			<!-- <view class="tabs">
				<text class="tab" @click="bindCheckTab(0)"></text>
				<text class="tab" @click="bindCheckTab(1)"></text>
			</view> -->
			<view class="un-ts" v-if="tabIndex==0&&userData.trc20Address==''" @click.stop="bindTrc20">
				<text>您未绑定USDT提现地址,请绑定后再申请</text>
				<view class="">
					<text>去绑定</text>
					<image src="/static/right-g.png" mode=""></image>
				</view>
			</view>
			<view class="un-ts" v-if="tabIndex==1 && userData.bankName==''" @click.stop="bindBank">
				<text>您未绑定提现银行信息,请绑定后再申请提现</text>
				<view class="">
					<text>去绑定</text>
					<image src="/static/right-g.png" mode=""></image>
				</view>
			</view>
			<text class="title" v-if="tabIndex==0&&userData.trc20Address">提现地址</text>
			<view class="trc20" v-if="tabIndex==0&&userData.trc20Address" @click="copy(userData.trc20Address)">
				<text class="content">{{userData.trc20Address}}</text>
				<text class="copy">复制</text>
			</view>
			<text class="title">身份验证</text>
			<view class="from" v-if="userData">
				<view class="from-item">
					<text class="area">{{userData.countryNo}}</text>
					<input type="number" disabled :placeholder="userData.mobile" placeholder-class="phl" />
				</view>
				<view class="from-item">
					<input type="number" style="width: 350rpx;" v-model="withdrawDAO.code" placeholder="请输入验证码"
						placeholder-class="phl" />
					<text class="code" @click="getCode">{{codeMessage}}</text>
				</view>
			</view>
<!-- 			<text class="title" v-if="tabIndex==1&& userData.bankName">银行账号</text>
			<input type="text" v-if="tabIndex==1&& userData.bankName" v-model="userData.accountNumber" disabled placeholder="请输入交易单号" placeholder-style="color:#BEBFC4"
				class="orderno" />
			<text class="title" v-if="tabIndex==1&& userData.bankName">真实姓名</text>
			<input type="text" v-if="tabIndex==1&& userData.bankName" v-model="userData.name" disabled placeholder="请输入交易单号" placeholder-style="color:#BEBFC4"
				class="orderno" />
			<text class="title" v-if="tabIndex==1&& userData.bankName">提现银行</text>
			<input type="text" v-if="tabIndex==1&& userData.bankName" v-model="userData.bankName" disabled placeholder="请输入交易单号" placeholder-style="color:#BEBFC4"
				class="orderno" /> -->
			<text class="title">提现金额</text>
			<view class="money">
				<text>U</text>
				<input type="text" placeholder="0.00" v-model="withdrawDAO.amount" class="amount-input" placeholder-style="color:#BEBFC4" />
				<view class="">
					<text style="color: #316BFF;margin-bottom: 15rpx;" @click="allWithdraw">全部提现</text>
					<text>可提现余额U{{userData.balance}}</text>
				</view>
			</view>
			<view class="amount-ts">
				<text>提示：提现需扣除服务费0.3%，请自行缴纳税款。</text>

			</view>

		</view>
	</view>
	<button class="btn" @click="bindUsdtSubmit">提交审核</button>
	
	<text class="history" @click="bindHistory">提现记录</text>
	<view style="height: 80rpx;">

	</view>
	<uni-pay ref="pay" :amount="withdrawDAO.amount" @bindPassWord="confirm"></uni-pay>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		withdrawalApply,
		user,
		smsCode 
	} from "@/util/api.js"
	import {
		onShow
	} from '@dcloudio/uni-app'
	const pay = ref()
	onShow(() => {
	
		getUser()
	})
	const withdrawDAO = ref({
		"amount": '',
		"transactionPassword": '',
		"type": "usdt",
		"code":""
	})
	const tabIndex = ref(0)
	const userData = ref()
	// 绑定提现地址
	const bindTrc20 = ()=>{
		uni.navigateTo({
			url:'/pages/trc20/trc20'
		})
	}
	// 绑定银行卡
	const bindBank = ()=>{
		uni.navigateTo({
			url:"/pages/bank/bank"
		})
	}
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()
		
		if (result.code == 200) {
			userData.value = result.data
		} else {
			userData.value = null
		}
	}
	const bindCheckTab = (index) => {
		tabIndex.value = index
		if(index==0){
			withdrawDAO.value.type = "usdt"
		}else{
			withdrawDAO.value.type = "rmb"
		}
	}
	// 获取短信
	const codeMessage = ref("获取验证码")
	let bok = true
	let num = 60
	const getCode = async ()=>{
		
		if(!bok) return false;
		bok = false
		uni.showLoading({
			mask:true
		})
		const result = await smsCode({countryNo:userData.value.countryNo,mobile:userData.value.mobile})
		uni.hideLoading()
		if(result.code!=200){
			bok = true
			codeMessage.value = "获取验证码"
			return false
		}
		let timer = setInterval(()=>{
			num--
			codeMessage.value = `${num}秒后重试`
			if(num<=0){
				bok = true
				codeMessage.value = "获取验证码"
				clearInterval(timer)
			}
		},1000)
	}
	// 全部提现
	const allWithdraw = ()=>{
		withdrawDAO.value.amount = userData.value.balance
	}
	const copy = (text) => {
		uni.setClipboardData({
			data: String(text),
			success: function() {
				console.log('success');
			}
		});
	}
	const back = () => {
		uni.navigateBack()
	}
	const bindUsdtSubmit = async () => {
		if(!withdrawDAO.value.code){
			uni.showModal({
				title:"提示",
				content:"请输入验证码",
				showCancel:false
			})
			return false;
		}
		if(!withdrawDAO.value.amount){
			uni.showModal({
				title:"提示",
				content:"请输入提现金额",
				showCancel:false
			})
			return false;
		}
		if(withdrawDAO.value.amount<=0){
			uni.showModal({
				title:"提示",
				content:"提现金额必须大于0",
				showCancel:false
			})
			return false;
		}
		pay.value.show()
		
	}
	const confirm = async (e)=>{
		withdrawDAO.value.transactionPassword = e
		uni.showLoading({
			mask:true
		})
		const result = await withdrawalApply(withdrawDAO.value)
		uni.hideLoading()
		if(result.code==200){
			uni.showModal({
				title:"提示",
				content:"操作成功",
				showCancel:false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
	}
	// 查询历史记录
	const bindHistory = ()=>{
		uni.navigateTo({
			url:"/pages/bill/bill?state=withdrawal"
		})
	}
	
</script>

<style lang="scss">
	.from {
		
		
	
		.from-item {
			width: 596rpx;
			height: 92rpx;
			background: #F2F5F9;
			border-radius: 23rpx;
			margin: 0 0 38rpx;
			text-indent: 30rpx;
			margin-bottom: 38rpx;
			display: flex;
			align-items: center;
			
	
			.phl {
				color: #999;
				font-size: 28rpx;
			}
	
			.area {
				display: block;
				margin-right: 38rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}
	
			.code {
				font-weight: bold;
				display: block;
	
				color: #333333;
				font-size: 28rpx;
			}
		}
	
		
	
	}
	
	.history{
		display: block;
		text-align: center;
		color: #666666;
		font-size: 35rpx;
	}
	.un-ts {
		width: 596rpx;
		height: 112rpx;
		background: #FEF6E9;
		border-radius: 23rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 38rpx;

		text {
			color: #FF984D;
			font-size: 28rpx;
			display: block;
		}

		>text {
			width: 380rpx;
		}

		view {
			display: flex;
			align-items: center;

			text {
				font-weight: bold;
			}

			image {
				width: 24rpx;
				height: 24rpx;
				display: block;
				margin-left: 10rpx;
			}
		}
	}

	.bank {
		width: 596rpx;

		background: #F2F5F9;
		border-radius: 23rpx;
		margin-bottom: 20rpx;
		overflow: hidden;

		text {
			display: block;
			margin: 28rpx 20rpx;
			color: #313646;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.btn {
		width: 673rpx;
		height: 92rpx;
		background: linear-gradient(180deg, #4D75F6 0%, #7FA1F8 100%);
		border-radius: 23rpx;
		margin: 50rpx auto;
		display: block;
		color: #fff;
		font-size: 30rpx;
		line-height: 92rpx;
	}

	.add-pic {
		display: block;
		width: 196rpx;
		height: 196rpx;

	}

	.orderno {
		display: block;
		width: 596rpx;
		height: 92rpx;
		background: #F2F5F9;
		border-radius: 23rpx;
		margin: 0 0 38rpx;
		text-indent: 30rpx;
	}

	.amount-ts {
		margin: 0 0 38rpx 0;

		text {
			color: #BEBFC4;
			font-size: 24rpx;
		}
	}

	.money {
		width: 596rpx;
		height: 154rpx;
		background: #F2F5F9;
		border-radius: 23rpx;
		margin: 0 0 20rpx;
		display: flex;
		align-items: center;

		text {
			display: block;
			font-size: 36rpx;
			color: #313646;
			margin-left: 20rpx;
			margin-right: 14rpx;
			font-weight: 800;
		}

		.amount-input {
			display: block;
			height: 100%;
			font-size: 58rpx;
			font-weight: 800;
			color: #333;
		}

		>view {
			width: 550rpx;

			text {
				font-size: 28rpx;
				display: block;
				color: #BEBFC4;
				text-align: right;
			}
		}
	}

	.title {
		margin: 0 0 30rpx 0;
		color: #313646;
		font-size: 28rpx;
		font-weight: 800;
		display: block;
	}

	.ts {
		display: block;
		margin: 20rpx 0 38rpx;
		color: #999;
		font-size: 24rpx;
	}

	.trc20 {
		margin: 38rpx auto;
		width: 536rpx;
		// height: 154rpx;
		background: #F2F5F9;
		border-radius: 23rpx;
		overflow: hidden;
		padding: 0 30rpx 30rpx;

		.content {
			color: #313646;
			font-size: 28rpx;
			display: block;
			width: 100%;
			white-space: pre-wrap;

			word-wrap: break-word;
			margin-top: 38rpx;
		}

		.copy {
			display: block;
			text-align: right;
			color: #316BFF;
			font-size: 28rpx;
			margin-top: 23rpx;
		}
	}

	.qrcode {
		width: 269rpx;
		height: 269rpx;
		background: #FFFFFF;
		border-radius: 23rpx;
		border: 2rpx solid #E3E5E8;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			display: block;
			width: 248rpx;
			height: 248rpx;
			background: pink;
		}
	}

	.tabs {

		display: flex;
		position: absolute;
		left: 0;
		top: 0;

		z-index: 99;

		.tab {
			display: block;
			width: 337rpx;
			height: 142rpx;

		}
	}

	.box-center {
		position: relative;
		padding: 0 38rpx;
		margin: 0 38rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 38rpx 0px rgba(49, 54, 70, 0.06);
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		padding-bottom: 38rpx;
	}

	.bg {
		display: block;
		width: 674rpx;
		margin-left: -38rpx;
		height: 142rpx;
	}

	.box {
		position: relative;
		margin-top: -208rpx;
		overflow: hidden;
	}

	.header {
		width: 750rpx;
		height: 408rpx;
		background: url(/static/r-icon.png) no-repeat;
		background-size: cover;
		overflow: hidden;

		.bar {
			height: 92rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-top: 88rpx;

			text {
				color: #fff;
				font-size: 36rpx;
			}

			image {
				position: absolute;
				width: 46rpx;
				height: 46rpx;
				left: 38rpx;
				transform: rotate(180deg);
			}
		}
	}
</style>